<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> Admin Home-首页</title>
   
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/templatemo-style.css" rel="stylesheet">
    

  </head>
  <body>  
    <!-- 左列 -->
    <div class="templatemo-flex-row">
      <div class="templatemo-sidebar">
        <header class="templatemo-site-header">
          <div class="square"></div>
          <h1>Admin-后台</h1>
        </header>
        <div class="profile-photo-container">

          <div class="profile-photo-overlay"></div>
        </div>      
    
        </form>
        <div class="mobile-menu-icon">
            <i class="fa fa-bars"></i>
        </div>
        <nav class="templatemo-left-nav">          
          <ul>
            <li><a href="IndexQueryServlet"><i class="fa fa-home fa-fw"></i>首页</a></li>
            <li><a href="maps.jsp" class="active"><i class="fa fa-map-marker fa-fw"></i>志愿者Maps</a></li>
            <li><a href="manage-users.jsp"><i class="fa fa-users fa-fw"></i>管理用户</a></li>
            <li><a href="manage-Juan.jsp"><i class="fa fa-users fa-fw"></i>管理捐款</a></li>
            <li><a href="manage-Yuan.jsp"><i class="fa fa-users fa-fw"></i>管理原因</a></li>
            <li><a href="manage-Shi.jsp"><i class="fa fa-users fa-fw"></i>管理事件</a></li>
            <li><a href="manage-Tu.jsp"><i class="fa fa-users fa-fw"></i>陈列馆管理</a></li>
            <li><a href="login.jsp"><i class="fa fa-eject fa-fw"></i>退出</a></li>
          </ul>  
        </nav>
      </div>
      <!-- Main content --> 
      <div class="templatemo-content col-1 light-gray-bg">
        <div class="templatemo-top-nav-container">
          <div class="row">
            <nav class="templatemo-top-nav col-lg-12 col-md-12">
              <ul class="text-uppercase">
                 <li><a href="IndexQueryServlet" class="active">首页</a></li>
                <li><a href="maps.jsp">志愿者地图</a></li>
                <li><a href="manage-users.jsp">管理用户</a></li>
                 <li><a href="manage-Juan.jsp">管理捐款</a></li>
                 <li><a href="manage-Yuan.jsp">管理原因</a></li>
                 <li><a href="manage-Shi.jsp">管理事件</a></li>
                <li><a href="login.jsp">退出</a></li>
              </ul>  
            </nav> 
          </div>
        </div>
        <div class="templatemo-content-container">
          <div class="templatemo-flex-row flex-content-row">
            <div class="templatemo-content-widget white-bg col-2">
              <i class="fa fa-times"></i>
              <div class="square"></div>
              <h2 class="templatemo-inline-block">后台管理</h2><hr>
              <p>欢迎进入后台管理系统 <a href="" ></a>希望管理员谨记<a href="">《管理员守则》</a> 如有问题 <a href="">请联系超级管理员</a> 再次声明谨记《管理员守则》。</p>
              <p>人不负青山,青山定不负人。深怀对自然的敬畏之心, 尊重自然,顺应自然,保护自然。今年6月5日是第53个世界环境日，我国六五环境日的主题是 “美丽中国，我是行动者”。构建全社会共同参与的环境治理体系，守护绿水青山，中国持续发力。</p>              
            </div>
            <div class="templatemo-content-widget white-bg col-1 text-center">
              <i class="fa fa-times"></i>
              <h2 class="text-uppercase">呈现</h2>
              <h3 class="text-uppercase margin-bottom-10">管理员头像</h3>
              <img src="images/bicycle.jpg" alt="Bicycle" class="img-circle img-thumbnail">
            </div>
            <div class="templatemo-content-widget white-bg col-1">
              <i class="fa fa-times"></i>
              <h2 class="text-uppercase">Admin</h2>
              <h3 class="text-uppercase">管理守则</h3><hr>
              <div >
                <div >1.合法合规原则<br>
                      后台管理人员必须遵守国家相关法律法规和公司制度，不得利用后台权限进行违法违规
                </div>

              </div>
              <div >
                <div >2.安全保密原则<br>
                      后台管理人员必须严格遵守信息安全规定，做好信息保密工作，不得泄露机密信息。
                </div>
              </div>
              <div>
                <div >3.高效管理原则<br>
                      后台管理人员必须高效地管理系统，提高管理效率，确保系统稳定运行。
                </div>
              </div>                          
            </div>
          </div>           
              
            <div class="col-1">
              <div class="panel panel-default templatemo-content-widget white-bg no-padding templatemo-overflow-hidden">
                <i class="fa fa-times"></i>
                <div class="panel-heading templatemo-position-relative"><h2 class="text-uppercase">志愿者 Table</h2></div>
                <div class="table-responsive">
                  <table class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <td>No.</td>
                        <td>Username</td>
                        <td>password</td>
                        <td>等级</td>
                      </tr>
                    </thead>
                    <tbody>
                    <c:forEach  items="${requestScope.userall}" var="use">
                      <tr>
                      <td>${use.id}</td>
                       <td>${use.userName}</td>
                       <td>${use.userPass}</td>
                       <td>${use.identity}</td>
                      </tr>
                      </c:forEach>                
                    </tbody>
                  </table>    
                </div>                          
              </div>
            </div>           
          </div> 
          <div class="templatemo-flex-row flex-content-row templatemo-overflow-hidden"> 
            <div class="col-1 templatemo-overflow-hidden">
              <div class="templatemo-content-widget white-bg templatemo-overflow-hidden">
                <i class="fa fa-times"></i>
                <div class="templatemo-flex-row flex-content-row">
                  <div class="col-1 col-lg-6 col-md-12">
                    <h2 class="text-center">环境IMAGE<span class="badge">new</span></h2>
                    <div><img src="images/profile-photo.jpg"></div> 
                  </div>
                  <div class="col-1 col-lg-6 col-md-12">
                    <h2 class="text-center">环境IMAGE<span class="badge">new</span></h2>
                    <div id="bar_chart_div" class="templatemo-chart"><img src="images/profile-photo.jpg"></div>
                  </div>  
                </div>                
              </div>
            </div>
          </div>
          <footer class="text-right">
            <!-- <p>Copyright &copy; 2084 Company Name 
            | Designed by <a href="">templatemo</a></p> -->
          </footer>         
        </div>
      </div>
    </div>
    
    <!-- JS -->
    <script src="js/jquery-1.11.2.min.js"></script>      <!-- jQuery -->
    <script src="js/jquery-migrate-1.2.1.min.js"></script> <!--  jQuery迁移插件 -->
    <script>
      
    

      
      // 创建并填充数据表的回调，
      // 实例化饼图，传入数据并绘制它。
      function drawChart() {

          // 创建数据表。
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Topping');
          data.addColumn('number', 'Slices');
          data.addRows([
            ['Mushrooms', 3],
            ['Onions', 1],
            ['Olives', 1],
            ['Zucchini', 1],
            ['Pepperoni', 2]
          ]);

          // 设置图表选项
          var options = {'title':'How Much Pizza I Ate Last Night'};

          //实例化并绘制我们的图表，传递一些选项。
          var pieChart = new google.visualization.PieChart(document.getElementById('pie_chart_div'));
          pieChart.draw(data, options);

          var barChart = new google.visualization.BarChart(document.getElementById('bar_chart_div'));
          barChart.draw(data, options);
      }

      $(document).ready(function(){
        if($.browser.mozilla) {
          //浏览器调整大小时刷新页面
        
          $(window).bind('resize', function(e)
          {
            if (window.RT) clearTimeout(window.RT);
            window.RT = setTimeout(function()
            {
              this.location.reload(false); /* false从缓存中获取页面 */
            }, 200);
          });      
        } else {
          $(window).resize(function(){
            drawChart();
          });  
        }   
      });
      
    <script type="text/javascript" src="js/templatemo-script.js"></script> 
  </body>
</html>